<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
  <title>新干县纪委</title>
  <link rel="stylesheet" href="src/styles/global.css">
  <link rel="stylesheet" href="src/styles/index.css">
  <link rel="stylesheet" href="src/styles/components.css">
</head>

<body>
  <div class="app-header">
    <div class="header-left">
      <div class="logo-area">
        <span class="logo-icon">📊</span>
        <span class="app-title">数据分析</span>
      </div>
      <div class="divider">|</div>
      <nav class="main-nav">
        <a href="#" class="nav-link active">📁 案件管理</a>
        <div class="divider">|</div>
        <a href="#" class="nav-link" id="templateManageLink">📋 模板管理</a>
        <div class="divider">|</div>
        <a href="#" class="nav-link">⚙️ 基础信息管理 ▾</a>
        <div class="divider">|</div>
      </nav>
    </div>
  </div>

  <div class="main-container">
    <div class="content-wrapper">
      <!-- 顶部标签页 -->
      <div class="page-tabs">
        <div class="page-tab active">
          案件管理 <span class="tab-close">×</span>
        </div>
      </div>

      <!-- 筛选区域 -->
      <div class="filter-section">
        <div class="filter-row">
          <div class="filter-item">
            <label>案件编号：</label>
            <input type="text" id="searchCaseNumber" placeholder="请输入案件编号">
          </div>
          <div class="filter-item">
            <label>案件名称：</label>
            <input type="text" id="searchCaseName" placeholder="请输入案件名称">
          </div>
          <div class="filter-item">
            <label>立案时间：</label>
            <div class="date-range">
              <input type="date" id="searchStartDate">
              <span class="separator">-</span>
              <input type="date" id="searchEndDate">
            </div>
          </div>
          <div class="filter-actions">
            <button class="btn-primary" id="queryBtn">🔍 查询</button>
            <button class="btn-secondary" id="resetBtn">🔄 重置</button>
          </div>
        </div>
      </div>

      <!-- 操作栏 -->
      <div class="action-bar" style="display: flex; gap: 12px;">
        <button class="btn-primary new-case-btn" style="display: flex; align-items: center; gap: 6px;">
          <span>+</span> 新增案件
        </button>
        <button class="btn-primary import-case-btn" style="display: flex; align-items: center; gap: 6px;">
          <span>📥</span> 导入案件
        </button>
      </div>

      <!-- 案件列表 -->
      <div class="cases-grid" id="casesGrid">
        <!-- 案件卡片将在这里动态生成 -->
      </div>
    </div>
  </div>

  <!-- 案件卡片模板 -->
  <template id="case-card-template">
    <div class="case-card">
      <div class="card-header">
        <div class="header-left">
          <span class="case-name"></span>
          <span class="lock-icon" style="display:none;">🔒</span>
        </div>
        <div class="header-right">
          <span class="closed-badge" style="display:none;">结案</span>
          <span class="status-tag"></span>
        </div>
      </div>

      <div class="card-body">
        <div class="info-row">
          <span class="label">案件编号：</span>
          <span class="value case-number"></span>
        </div>
        <div class="info-row">
          <span class="label">立案时间：</span>
          <span class="value created-time"></span>
        </div>
      </div>

      <div class="card-footer">
        <div class="action-buttons">
          <button class="icon-btn import-btn" title="导入">
            <span class="icon">📥</span>
            <span class="text">导入</span>
          </button>
          <button class="icon-btn analyze-btn" title="分析">
            <span class="icon">⏱️</span>
            <span class="text">分析</span>
          </button>
          <button class="icon-btn edit-btn" title="编辑">
            <span class="icon">📝</span>
            <span class="text">编辑</span>
          </button>
          <button class="icon-btn delete-btn" title="删除">
            <span class="icon">🗑️</span>
            <span class="text">删除</span>
          </button>
          <div class="dropdown">
            <button class="icon-btn more-btn" title="更多">
              <span class="icon">⊕</span>
              <span class="text">更多</span>
            </button>
            <div class="dropdown-menu">
              <!-- 菜单项将根据案件状态动态生成 -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

  <!-- 新增案件弹出层（现代化UI）-->
  <div class="modal-overlay" id="newCaseModal" style="display: none;">
    <div class="modal-content modern-modal"
      style="max-width: 600px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); display: flex; flex-direction: column; height: 80vh;">
      <div class="modal-header"
        style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px 30px; border-radius: 16px 16px 0 0; flex-shrink: 0;">
        <div style="display: flex; align-items: center; gap: 12px;">
          <span style="font-size: 24px;">📋</span>
          <h2 style="margin: 0; font-size: 20px;">新增案件</h2>
        </div>
        <span class="close-btn" id="closeNewCaseModal"
          style="color: #f56c6c; opacity: 0.9; cursor: pointer; font-size: 28px; line-height: 1; transition: opacity 0.2s;"
          onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.9'">&times;</span>
      </div>
      <div class="modal-body" style="padding: 30px; background: #f8f9fa; overflow-y: auto; flex: 1;">
        <form id="newCaseForm">
          <!-- 基本信息组 -->
          <div
            style="background: white; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
            <h3
              style="margin: 0 0 20px; font-size: 16px; color: #303133; display: flex; align-items: center; gap: 8px;">
              <span
                style="display: inline-block; width: 4px; height: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 2px;"></span>
              基本信息
            </h3>

            <div class="form-group" style="margin-bottom: 20px;">
              <label for="caseNumber"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">
                案件编号
                <span
                  style="display: inline-block; margin-left: 8px; padding: 2px 8px; background: #e1f3d8; color: #67c23a; border-radius: 4px; font-size: 12px; font-weight: normal;">自动生成</span>
              </label>
              <div style="position: relative;">
                <span
                  style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">🔢</span>
                <input type="text" id="caseNumber" name="caseNumber" readonly
                  style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; background: #f5f7fa; color: #909399; cursor: not-allowed; transition: all 0.3s;">
              </div>
            </div>

            <div class="form-group" style="margin-bottom: 20px;">
              <label for="caseName"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">
                案件名称 <span style="color: #f56c6c;">*</span>
              </label>
              <div style="position: relative;">
                <span
                  style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">📝</span>
                <input type="text" id="caseName" name="caseName" required placeholder="请输入案件名称"
                  style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; transition: all 0.3s;"
                  onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 0 0 2px rgba(102, 126, 234, 0.1)'"
                  onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none'">
              </div>
            </div>

            <div class="form-group" style="margin-bottom: 20px;">
              <label for="caseCategory"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">
                案件类别 <span style="color: #f56c6c;">*</span>
              </label>
              <div style="position: relative;">
                <span
                  style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">📂</span>
                <select id="caseCategory" name="caseCategory" required
                  style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; transition: all 0.3s; appearance: none; background: white url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e') no-repeat right 12px center/16px 16px;"
                  onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 0 0 2px rgba(102, 126, 234, 0.1)'"
                  onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none'">
                  <option value="">请选择案件类别</option>
                  <option value="初核">初核</option>
                  <option value="留置">留置</option>
                </select>
              </div>
            </div>

            <div class="form-group" style="margin-bottom: 0;">
              <label for="createTime"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">
                立案时间 <span style="color: #f56c6c;">*</span>
              </label>
              <div style="position: relative;">
                <span
                  style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">📅</span>
                <input type="date" id="createTime" name="createTime" required
                  style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; transition: all 0.3s;"
                  onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 0 0 2px rgba(102, 126, 234, 0.1)'"
                  onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none'">
              </div>
            </div>
          </div>

          <!-- 安全设置组 -->
          <div
            style="background: white; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
            <h3
              style="margin: 0 0 20px; font-size: 16px; color: #303133; display: flex; align-items: center; gap: 8px;">
              <span
                style="display: inline-block; width: 4px; height: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 2px;"></span>
              安全设置
            </h3>

            <div class="form-group" style="margin-bottom: 0;">
              <label for="casePassword"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">
                案件加密
                <span
                  style="display: inline-block; margin-left: 8px; padding: 2px 8px; background: #fef0f0; color: #f56c6c; border-radius: 4px; font-size: 12px; font-weight: normal;">可选</span>
              </label>
              <div style="position: relative;">
                <span
                  style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">🔑</span>
                <input type="password" id="casePassword" name="casePassword" placeholder="设置访问密码（可选）"
                  style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; transition: all 0.3s;"
                  onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 0 0 2px rgba(102, 126, 234, 0.1)'"
                  onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none'">
              </div>
              <p style="margin: 8px 0 0; font-size: 12px; color: #909399;">💡 设置后需要密码才能打开案件</p>
            </div>
          </div>

          <!-- 案情简介组 -->
          <div
            style="background: white; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
            <h3
              style="margin: 0 0 20px; font-size: 16px; color: #303133; display: flex; align-items: center; gap: 8px;">
              <span
                style="display: inline-block; width: 4px; height: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 2px;"></span>
              案情简介
            </h3>

            <div class="form-group" style="margin-bottom: 0; position: relative;">
              <label for="caseDescription"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">
                详细描述
                <span
                  style="display: inline-block; margin-left: 8px; padding: 2px 8px; background: #fef0f0; color: #f56c6c; border-radius: 4px; font-size: 12px; font-weight: normal;">可选</span>
              </label>
              <textarea id="caseDescription" name="caseDescription" rows="6" placeholder="请输入案情简介、关键线索等信息..."
                maxlength="1000"
                style="width: 100%; padding: 12px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; resize: vertical; transition: all 0.3s; font-family: inherit;"
                onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 0 0 2px rgba(102, 126, 234, 0.1)'"
                onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none'"
                oninput="document.getElementById('charCount').textContent = this.value.length"></textarea>
              <div
                style="position: absolute; right: 12px; bottom: 12px; font-size: 12px; color: #c0c4cc; pointer-events: none;">
                <span id="charCount">0</span>/1000
              </div>
            </div>
          </div>

          <div class="form-actions" style="display: flex; gap: 12px; justify-content: flex-end;">
            <button type="button" class="btn-cancel" id="cancelNewCase"
              style="padding: 10px 24px; border: 1px solid #dcdfe6; background: white; color: #606266; border-radius: 8px; font-size: 14px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 6px;"
              onmouseover="this.style.background='#f5f7fa'; this.style.borderColor='#c0c4cc'"
              onmouseout="this.style.background='white'; this.style.borderColor='#dcdfe6'">
              <span>✖️</span> 取消
            </button>
            <button type="submit" class="btn-save"
              style="padding: 10px 24px; border: none; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);"
              onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 6px 16px rgba(102, 126, 234, 0.4)'"
              onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(102, 126, 234, 0.3)'">
              <span>💾</span> 保存案件
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 编辑案件弹出层（现代化UI）-->
  <div class="modal-overlay" id="editCaseModal" style="display: none;">
    <div class="modal-content modern-modal"
      style="max-width: 600px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); display: flex; flex-direction: column; height: 80vh;">
      <div class="modal-header"
        style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px 30px; border-radius: 16px 16px 0 0; flex-shrink: 0;">
        <div style="display: flex; align-items: center; gap: 12px;">
          <span style="font-size: 24px;">✏️</span>
          <h2 style="margin: 0; font-size: 20px;">编辑案件</h2>
        </div>
        <span class="close-btn" id="closeEditCaseModal"
          style="color: #f56c6c; opacity: 0.9; cursor: pointer; font-size: 28px; line-height: 1; transition: opacity 0.2s;"
          onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.9'">&times;</span>
      </div>
      <div class="modal-body" style="padding: 30px; background: #f8f9fa; overflow-y: auto; flex: 1;">
        <form id="editCaseForm">
          <input type="hidden" id="editCaseId" name="editCaseId">

          <!-- 基本信息组 -->
          <div
            style="background: white; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
            <h3
              style="margin: 0 0 20px; font-size: 16px; color: #303133; display: flex; align-items: center; gap: 8px;">
              <span
                style="display: inline-block; width: 4px; height: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 2px;"></span>
              基本信息
            </h3>

            <div class="form-group" style="margin-bottom: 20px;">
              <label for="editCaseNumber"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">
                案件编号
                <span
                  style="display: inline-block; margin-left: 8px; padding: 2px 8px; background: #e1f3d8; color: #67c23a; border-radius: 4px; font-size: 12px; font-weight: normal;">只读</span>
              </label>
              <div style="position: relative;">
                <span
                  style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">🔢</span>
                <input type="text" id="editCaseNumber" name="editCaseNumber" readonly
                  style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; background: #f5f7fa; color: #909399; cursor: not-allowed;">
              </div>
            </div>

            <div class="form-group" style="margin-bottom: 20px;">
              <label for="editCaseName"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">
                案件名称 <span style="color: #f56c6c;">*</span>
              </label>
              <div style="position: relative;">
                <span
                  style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">📝</span>
                <input type="text" id="editCaseName" name="editCaseName" required placeholder="请输入案件名称"
                  style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; transition: all 0.3s;"
                  onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 0 0 2px rgba(102, 126, 234, 0.1)'"
                  onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none'">
              </div>
            </div>

            <div class="form-group" style="margin-bottom: 20px;">
              <label for="editCaseCategory"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">
                案件类别 <span style="color: #f56c6c;">*</span>
              </label>
              <div style="position: relative;">
                <span
                  style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">📂</span>
                <select id="editCaseCategory" name="editCaseCategory" required
                  style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; transition: all 0.3s; appearance: none; background: white url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e') no-repeat right 12px center/16px 16px;"
                  onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 0 0 2px rgba(102, 126, 234, 0.1)'"
                  onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none'">
                  <option value="初核">初核</option>
                  <option value="留置">留置</option>
                </select>
              </div>
            </div>

            <div class="form-group" style="margin-bottom: 0;">
              <label for="editStartTime"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">
                立案时间 <span style="color: #f56c6c;">*</span>
              </label>
              <div style="position: relative;">
                <span
                  style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">📅</span>
                <input type="date" id="editStartTime" name="editStartTime" required
                  style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; transition: all 0.3s;"
                  onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 0 0 2px rgba(102, 126, 234, 0.1)'"
                  onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none'">
              </div>
            </div>
          </div>

          <!-- 案情简介组 -->
          <div
            style="background: white; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
            <h3
              style="margin: 0 0 20px; font-size: 16px; color: #303133; display: flex; align-items: center; gap: 8px;">
              <span
                style="display: inline-block; width: 4px; height: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 2px;"></span>
              案情简介
            </h3>

            <div class="form-group" style="margin-bottom: 0; position: relative;">
              <label for="editCaseDescription"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">
                详细描述
                <span
                  style="display: inline-block; margin-left: 8px; padding: 2px 8px; background: #fef0f0; color: #f56c6c; border-radius: 4px; font-size: 12px; font-weight: normal;">可选</span>
              </label>
              <textarea id="editCaseDescription" name="editCaseDescription" rows="6" placeholder="请输入案情简介、关键线索等信息..."
                maxlength="1000"
                style="width: 100%; padding: 12px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; resize: vertical; transition: all 0.3s; font-family: inherit;"
                onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 0 0 2px rgba(102, 126, 234, 0.1)'"
                onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none'"
                oninput="document.getElementById('editCharCount').textContent = this.value.length"></textarea>
              <div
                style="position: absolute; right: 12px; bottom: 12px; font-size: 12px; color: #c0c4cc; pointer-events: none;">
                <span id="editCharCount">0</span>/1000
              </div>
            </div>
          </div>

          <div class="form-actions" style="display: flex; gap: 12px; justify-content: flex-end;">
            <button type="button" class="btn-cancel" id="cancelEditCase"
              style="padding: 10px 24px; border: 1px solid #dcdfe6; background: white; color: #606266; border-radius: 8px; font-size: 14px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 6px;"
              onmouseover="this.style.background='#f5f7fa'; this.style.borderColor='#c0c4cc'"
              onmouseout="this.style.background='white'; this.style.borderColor='#dcdfe6'">
              <span>✖️</span> 取消
            </button>
            <button type="submit" class="btn-save"
              style="padding: 10px 24px; border: none; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);"
              onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 6px 16px rgba(102, 126, 234, 0.4)'"
              onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(102, 126, 234, 0.3)'">
              <span>💾</span> 保存修改
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 导出案件弹出层（现代化UI）-->
  <div class="modal-overlay" id="exportCaseModal" style="display: none;">
    <div class="modal-content modern-modal"
      style="max-width: 600px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); display: flex; flex-direction: column; height: 80vh;">
      <div class="modal-header"
        style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; padding: 20px 30px; border-radius: 16px 16px 0 0; flex-shrink: 0;">
        <div style="display: flex; align-items: center; gap: 12px;">
          <span style="font-size: 24px;">📤</span>
          <h2 style="margin: 0; font-size: 20px; text-shadow: 0 1px 2px rgba(0,0,0,0.1);">导出案件</h2>
        </div>
        <span class="close-btn" id="closeExportCaseModal"
          style="color: #f56c6c; opacity: 0.9; cursor: pointer; font-size: 28px; line-height: 1; transition: opacity 0.2s;"
          onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.9'">&times;</span>
      </div>
      <div class="modal-body" style="padding: 30px; background: #f8f9fa; overflow-y: auto; flex: 1;">
        <form id="exportCaseForm">
          <input type="hidden" id="exportCaseId" name="exportCaseId">

          <!-- 导出设置组 -->
          <div
            style="background: white; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
            <h3
              style="margin: 0 0 20px; font-size: 16px; color: #303133; display: flex; align-items: center; gap: 8px;">
              <span
                style="display: inline-block; width: 4px; height: 16px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 2px;"></span>
              导出设置
            </h3>

            <div class="form-group" style="margin-bottom: 20px;">
              <label for="exportPath"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">导出路径</label>
              <div style="display: flex; gap: 10px;">
                <div style="position: relative; flex: 1;">
                  <span
                    style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">📂</span>
                  <input type="text" id="exportPath" name="exportPath" placeholder="请选择导出路径" readonly
                    style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; background: #f5f7fa; color: #606266; cursor: not-allowed;">
                </div>
                <button type="button" class="btn-secondary" id="selectExportPathBtn"
                  style="padding: 0 20px; border: 1px solid #dcdfe6; background: white; color: #606266; border-radius: 8px; cursor: pointer; transition: all 0.3s;"
                  onmouseover="this.style.borderColor='#4facfe'; this.style.color='#4facfe'"
                  onmouseout="this.style.borderColor='#dcdfe6'; this.style.color='#606266'">
                  浏览
                </button>
              </div>
            </div>

            <div class="form-group" style="margin-bottom: 0;">
              <label for="exporterName"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">导出人</label>
              <div style="position: relative;">
                <span
                  style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">👤</span>
                <input type="text" id="exporterName" name="exporterName" placeholder="请输入导出人姓名"
                  style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; transition: all 0.3s;"
                  onfocus="this.style.borderColor='#4facfe'; this.style.boxShadow='0 0 0 2px rgba(79, 172, 254, 0.2)'"
                  onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none'">
              </div>
            </div>
          </div>

          <!-- 安全选项组 -->
          <div
            style="background: white; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
            <h3
              style="margin: 0 0 20px; font-size: 16px; color: #303133; display: flex; align-items: center; gap: 8px;">
              <span
                style="display: inline-block; width: 4px; height: 16px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 2px;"></span>
              安全选项
            </h3>

            <div class="form-group" style="margin-bottom: 15px;">
              <label for="encryptPackage"
                style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: #606266;">
                <input type="checkbox" id="encryptPackage" name="encryptPackage"
                  style="width: 16px; height: 16px; accent-color: #4facfe;">
                加密整个案件包
              </label>
            </div>

            <div class="form-group" id="passwordGroup" style="display: none; margin-bottom: 0;">
              <label for="packagePassword"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">包加密密码</label>
              <div style="position: relative;">
                <span
                  style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">🔑</span>
                <input type="password" id="packagePassword" name="packagePassword" placeholder="请输入加密密码"
                  style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; transition: all 0.3s;"
                  onfocus="this.style.borderColor='#4facfe'; this.style.boxShadow='0 0 0 2px rgba(79, 172, 254, 0.2)'"
                  onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none'">
              </div>
            </div>
          </div>

          <div class="form-actions" style="display: flex; gap: 12px; justify-content: flex-end;">
            <button type="button" class="btn-cancel" id="cancelExportCase"
              style="padding: 10px 24px; border: 1px solid #dcdfe6; background: white; color: #606266; border-radius: 8px; font-size: 14px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 6px;"
              onmouseover="this.style.background='#f5f7fa'; this.style.borderColor='#c0c4cc'"
              onmouseout="this.style.background='white'; this.style.borderColor='#dcdfe6'">
              <span>✖️</span> 取消
            </button>
            <button type="submit" class="btn-save"
              style="padding: 10px 24px; border: none; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3); text-shadow: 0 1px 1px rgba(0,0,0,0.1);"
              onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 6px 16px rgba(79, 172, 254, 0.4)'"
              onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(79, 172, 254, 0.3)'">
              <span>📤</span> 开始导出
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 导入案件弹出层（现代化UI）-->
  <div class="modal-overlay" id="importCaseModal" style="display: none;">
    <div class="modal-content modern-modal"
      style="max-width: 600px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); display: flex; flex-direction: column; height: 80vh;">
      <div class="modal-header"
        style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px 30px; border-radius: 16px 16px 0 0; flex-shrink: 0;">
        <div style="display: flex; align-items: center; gap: 12px;">
          <span style="font-size: 24px;">📥</span>
          <h2 style="margin: 0; font-size: 20px; text-shadow: 0 1px 2px rgba(0,0,0,0.1);">导入案件</h2>
        </div>
        <span class="close-btn" id="closeImportCaseModal"
          style="color: #f56c6c; opacity: 0.9; cursor: pointer; font-size: 28px; line-height: 1; transition: opacity 0.2s;"
          onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.9'">&times;</span>
      </div>
      <div class="modal-body" style="padding: 30px; background: #f8f9fa; overflow-y: auto; flex: 1;">
        <form id="importCaseForm">

          <!-- 文件选择组 -->
          <div
            style="background: white; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
            <h3
              style="margin: 0 0 20px; font-size: 16px; color: #303133; display: flex; align-items: center; gap: 8px;">
              <span
                style="display: inline-block; width: 4px; height: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 2px;"></span>
              文件选择
            </h3>

            <div class="form-group" style="margin-bottom: 0;">
              <label for="importFilePath"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">案件文件</label>
              <div style="display: flex; gap: 10px;">
                <div style="position: relative; flex: 1;">
                  <span
                    style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">📂</span>
                  <input type="text" id="importFilePath" name="importFilePath" placeholder="请选择案件文件(.case)" readonly
                    style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; background: #f5f7fa; color: #606266; cursor: not-allowed;">
                </div>
                <button type="button" class="btn-secondary" id="selectImportFileBtn"
                  style="padding: 0 20px; border: 1px solid #dcdfe6; background: white; color: #606266; border-radius: 8px; cursor: pointer; transition: all 0.3s;"
                  onmouseover="this.style.borderColor='#667eea'; this.style.color='#667eea'"
                  onmouseout="this.style.borderColor='#dcdfe6'; this.style.color='#606266'">
                  浏览
                </button>
              </div>
            </div>
          </div>

          <!-- 安全与选项组 -->
          <div
            style="background: white; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
            <h3
              style="margin: 0 0 20px; font-size: 16px; color: #303133; display: flex; align-items: center; gap: 8px;">
              <span
                style="display: inline-block; width: 4px; height: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 2px;"></span>
              安全与选项
            </h3>

            <div class="form-group" style="margin-bottom: 20px;">
              <label for="ignoreIntegrity"
                style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: #606266;">
                <input type="checkbox" id="ignoreIntegrity" name="ignoreIntegrity"
                  style="width: 16px; height: 16px; accent-color: #667eea;">
                <span style="display: flex; align-items: center; gap: 4px;">
                  🛡️ 忽略文件完整性检查
                  <span style="font-size: 12px; color: #909399;">(仅在文件损坏时使用)</span>
                </span>
              </label>
            </div>

            <div class="form-group" style="margin-bottom: 0;">
              <label for="decryptPassword"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">解密密码</label>
              <div style="position: relative;">
                <span
                  style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">🔑</span>
                <input type="password" id="decryptPassword" name="decryptPassword" placeholder="如果案件包已加密，请输入解密密码"
                  style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; transition: all 0.3s;"
                  onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 0 0 2px rgba(102, 126, 234, 0.1)'"
                  onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none'">
              </div>
            </div>
          </div>

          <div class="form-actions" style="display: flex; gap: 12px; justify-content: flex-end;">
            <button type="button" class="btn-cancel" id="cancelImportCase"
              style="padding: 10px 24px; border: 1px solid #dcdfe6; background: white; color: #606266; border-radius: 8px; font-size: 14px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 6px;"
              onmouseover="this.style.background='#f5f7fa'; this.style.borderColor='#c0c4cc'"
              onmouseout="this.style.background='white'; this.style.borderColor='#dcdfe6'">
              <span>✖️</span> 取消
            </button>
            <button type="submit" class="btn-save"
              style="padding: 10px 24px; border: none; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); text-shadow: 0 1px 1px rgba(0,0,0,0.1);"
              onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 6px 16px rgba(102, 126, 234, 0.4)'"
              onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(102, 126, 234, 0.3)'">
              <span>📥</span> 开始导入
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 设置密码弹出层（现代化UI）-->
  <div class="modal-overlay" id="setPasswordModal" style="display: none;">
    <div class="modal-content modern-modal"
      style="max-width: 500px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); display: flex; flex-direction: column; height: 60vh;">
      <div class="modal-header"
        style="background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); color: white; padding: 20px 30px; border-radius: 16px 16px 0 0; flex-shrink: 0;">
        <div style="display: flex; align-items: center; gap: 12px;">
          <span style="font-size: 24px;">🔐</span>
          <h2 id="passwordModalTitle" style="margin: 0; font-size: 20px; text-shadow: 0 1px 2px rgba(0,0,0,0.1);">设置密码
          </h2>
        </div>
        <span class="close-btn" id="closePasswordModal"
          style="color: #f56c6c; opacity: 0.9; cursor: pointer; font-size: 28px; line-height: 1; transition: opacity 0.2s;"
          onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.9'">&times;</span>
      </div>
      <div class="modal-body" style="padding: 30px; background: #f8f9fa; overflow-y: auto; flex: 1;">
        <form id="passwordForm">
          <input type="hidden" id="passwordCaseId">
          <input type="hidden" id="passwordOperation">

          <div style="background: white; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">

            <div class="form-group" id="currentPasswordGroup" style="display: none; margin-bottom: 20px;">
              <label for="currentPassword"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">当前密码</label>
              <div style="position: relative;">
                <span
                  style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">🔑</span>
                <input type="password" id="currentPassword" name="currentPassword" placeholder="请输入当前密码"
                  style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; transition: all 0.3s;"
                  onfocus="this.style.borderColor='#fda085'; this.style.boxShadow='0 0 0 2px rgba(253, 160, 133, 0.2)'"
                  onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none'">
              </div>
            </div>

            <div class="form-group" style="margin-bottom: 20px;">
              <label for="newPassword"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">新密码</label>
              <div style="position: relative;">
                <span
                  style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">🔒</span>
                <input type="password" id="newPassword" name="newPassword" placeholder="请输入新密码"
                  style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; transition: all 0.3s;"
                  onfocus="this.style.borderColor='#fda085'; this.style.boxShadow='0 0 0 2px rgba(253, 160, 133, 0.2)'"
                  onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none'">
              </div>
            </div>

            <div class="form-group" style="margin-bottom: 0;">
              <label for="confirmPassword"
                style="display: block; margin-bottom: 8px; font-size: 14px; color: #606266; font-weight: 500;">确认密码</label>
              <div style="position: relative;">
                <span
                  style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #909399;">✅</span>
                <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入新密码"
                  style="width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; transition: all 0.3s;"
                  onfocus="this.style.borderColor='#fda085'; this.style.boxShadow='0 0 0 2px rgba(253, 160, 133, 0.2)'"
                  onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none'">
              </div>
            </div>
          </div>

          <div id="passwordHint"
            style="display: none; margin-top: 20px; padding: 12px 16px; background: #fdf6ec; border-radius: 8px; border-left: 4px solid #e6a23c; color: #e6a23c; font-size: 13px; align-items: center; gap: 8px;">
            <span style="font-size: 16px;">💡</span>
            <span>留空新密码以清除密码（取消加密）</span>
          </div>

          <div class="form-actions" style="display: flex; gap: 12px; justify-content: flex-end; margin-top: 30px;">
            <button type="button" class="btn-cancel" id="cancelPassword"
              style="padding: 10px 24px; border: 1px solid #dcdfe6; background: white; color: #606266; border-radius: 8px; font-size: 14px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 6px;"
              onmouseover="this.style.background='#f5f7fa'; this.style.borderColor='#c0c4cc'"
              onmouseout="this.style.background='white'; this.style.borderColor='#dcdfe6'">
              <span>✖️</span> 取消
            </button>
            <button type="submit" class="btn-save"
              style="padding: 10px 24px; border: none; background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); color: white; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(253, 160, 133, 0.3); text-shadow: 0 1px 1px rgba(0,0,0,0.1);"
              onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 6px 16px rgba(253, 160, 133, 0.4)'"
              onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(253, 160, 133, 0.3)'">
              <span>💾</span> 确认设置
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script src="src/renderer/index.js"></script>
</body>

</html>